<!-- 图纸审核 -->
<template>
  <div class="inner-container">
    <div class="section-title">基本信息</div>
    <!-- --------------------------------------------------详情表单-------------------------------------------------------- -->
    <el-form label-width="80px" label-position="left" :model="customerData">
      <el-row :gutter="10">
        <el-col :span="5" >
          <el-form-item label="客户编号" prop="id">
            <el-text>{{ customerData.id }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="5" :model="ordersData">
          <el-form-item label="订单编号" prop="orderNumber">
            <el-text>{{ ordersData.orderNumber }}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="客户状态" prop="status">
            <el-text v-if="customerData.status == 10">未订单客户—一客到店</el-text>
            <el-text v-else-if="customerData.status == 20" style="color:#FF9900;">未订单客户—二客到店</el-text>
            <el-text v-else-if="customerData.status == 30" style="color:#FF9900;">未订单客户—多客到店</el-text>
            <el-text v-else-if="customerData.status == 40" style="color:#FF9900;">订单客户—转单中</el-text>
            <el-text v-else-if="customerData.status == 50" style="color:#FF9900;">订单客户—已完成</el-text>
            <el-text v-else-if="customerData.status == 60" style="color:#FF9900;">订单客户—退/死单</el-text>
            <el-text v-else-if="customerData.status == 70" style="color:#FF9900;">待量房客户</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="客户类型" prop="type">
            <el-text v-if="customerData.type == 10">现房客户</el-text>
            <el-text v-else-if="customerData.type == 20">期房客户</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="客户姓名" prop="customerName">
            <el-text>{{ customerData.name }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="客户性别" prop="gender">
            <text v-if="customerData.gender == 1">男</text>
            <text v-else-if="customerData.gender==0">女</text>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="年龄" prop="age">
            <el-text>{{ customerData.age }}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="联系电话" prop="contactPhone">
            <el-text>{{ customerData.contactPhone }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="身份证号" prop="idNumber">
            <el-text>{{ customerData.idNumber }}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="紧急电话" prop="emergencyPhone">
            <el-text>{{ customerData.emergencyPhone }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="联系人" prop="emergencyContact">
            <el-text>{{ customerData.emergencyContact }}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="楼盘名称" prop="propertyName">
            <el-text>{{ customerData.propertyName }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="户型" prop="houseType">
            <el-text>{{ customerData.houseType }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="面积" prop="houseSize">
            <el-text>{{ customerData.houseSize }}平方米</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form label-width="80px" label-position="left" :model="customerData" ref="formRef">
        <el-row>
          <el-col>
            <el-form-item label="楼盘名称" prop="city">
              <el-text style="width: 60px">{{ customerData.city }}</el-text>
              <el-text style="width: 70px">{{ customerData.district }}</el-text>
              <el-text>{{ customerData.propertyAddr }}</el-text>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-form>

<!------------------------------------------------------------------------------------------------>
    <br>
    <div class="section-title">图纸审核</div>
    <el-form label-width="80px" label-position="left" :model="drawAudits">
      <el-row :gutter="30">
        <el-col :span="6" >
          <el-form-item label="提交时间">
            <el-date-picker
                v-model="drawAudits.submitDate"
                type="date"
                placeholder="请选择"
            />
          </el-form-item>
        </el-col>
      </el-row>


      <el-row :gutter="30">
        <el-col :span="6">
          <el-form-item  label="提交人"  >
            <el-input v-model="drawAudits.submitName" disabled/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-card shadow="never" style="margin: 10px">
          <template #header>电位图</template>

          <!-- 图片展示区域 -->
          <div v-for="(draw, index) in drawAudits.electricityList" :key="index">
            <el-image :src="draw.url" :preview-src-list="[draw.url]"></el-image>
            <div class="audit-section">
              <el-radio-group v-model="draw.qualified">
                <el-radio value="1">合格</el-radio>
                <el-radio value="0">不合格</el-radio>
              </el-radio-group>
              <el-input
                  v-if="draw.qualified === '0'"
                  v-model="draw.unqualified"
                  placeholder="请输入不合格原因"
              />
            </div>
          </div>
        </el-card>
      </el-row>

      <el-row>
        <el-card shadow="never" style="margin: 10px">
          <template #header>水位图</template>

          <!-- 图片展示区域 -->
          <div v-for="(draw, index) in drawAudits.waterList" :key="index">
            <el-image :src="draw.url" :preview-src-list="[draw.url]"></el-image>
            <div class="audit-section">
              <el-radio-group v-model="draw.qualified">
                <el-radio value="1">合格</el-radio>
                <el-radio value="0">不合格</el-radio>
              </el-radio-group>
              <el-input
                  v-if="draw.qualified === '0'"
                  v-model="draw.unqualified"
                  placeholder="请输入不合格原因"
              />
            </div>
          </div>
        </el-card>
      </el-row>

      <br>
      <el-form-item  >
        <el-button type="primary" @click="saveDrawAudits">保存</el-button>
        <el-button @click="$router.push('/crm/project')">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {ElMessage} from 'element-plus'
import {useRouter} from "vue-router"
import request from '@/utils/request';

const router = useRouter()
const formRef = ref()
//--------------------------------------------定义表单属性--------------------------------------//


//客户表
const customerData = ref({
  id: 0,
  status: undefined,
  type: undefined,
  customerName: undefined,
  age: 0,
  gender: undefined,
  contactPhone: undefined,
  idNumber: undefined,
  emergencyPhone: undefined,
  emergencyContact: undefined,
  propertyName: undefined,
  houseType: undefined,
  houseSize: undefined,
  province: undefined,
  city: undefined,
  district: undefined,
  propertyAddr: undefined
})
const cid = new URLSearchParams(window.location.search).get('cid');
const oid = new URLSearchParams(window.location.search).get('oid');

const tableCustomerData = () => {
  request.get('/api/crm/customer/select', {params: {id: cid}}).then((res) => {
    customerData.value = res.data.list[0];
    console.log(customerData.value);
  })
}

//订单表
const ordersData = ref({
  id: 0,
  orderNumber: undefined,
  order_date: undefined,
  user_id: 0,
  transfer_progress: undefined,
  designer: undefined,
  designer_progress: undefined,
  construction_id: undefined,
  create_user: undefined,
  create_time: undefined,
  update_user: undefined,
  update_time: undefined,
  dept_id: undefined,
})

const tableOrdersData = () => {
  request.get('/api/crm/orders//load',{params: {id: oid}}).then((res) => {
    ordersData.value = res.data.list[0];
    console.log(ordersData.value);
  })
}
onMounted(() => {
  tableCustomerData();
  tableOrdersData();
})


const formData = ref({
  ordersId: 0,
  auditParam: [],
  followUpName: undefined,
  drawType: undefined,
  remark:'',
  createTime: undefined,
})

// 初始化图纸数据
const drawAudits = ref({})

// 新增图纸数据加载
const loadDrawings = () => {
  request.get('/api/crm/project/loadDetail', { params: { id:oid } }).then(res => {
    // 处理电位图和水位图数据
    drawAudits.value = res.data
  })
}
onMounted(() => {
  tableCustomerData();
  tableOrdersData();
  loadDrawings();
})


const saveDrawAudits = () => {
  // 组装符合后端要求的参数格式
  const submitData = {
    id: oid, // 从URL获取的订单ID
    auditParams: [
      ...(drawAudits.value.electricityList || []),
      ...(drawAudits.value.waterList || [])
    ].map(item => ({
      id: item.id,
      qualified: Number(item.qualified), // 转换为数值类型
      unqualified: item.qualified === '0' ? item.unqualified : ''
    }))
  }

  request.post('/api/crm/project/submitAudit', submitData).then(res => {
    ElMessage.success('审核提交成功')
    router.push('/crm/project')
  }).catch(error => {
    ElMessage.error('提交失败: ' + error.message)
  })
}







</script>

<style scoped>
.section-title {
  position: relative;
  padding-left: 10px;
  margin-bottom: 35px;
  line-height: 1rem;
  border-left: 3px solid #409EFF;
}

.section-title::after {
  content: '';
  position: absolute;
  left: -3px;
  bottom: -10px;
  width: 100%;
  height: 1px;
  background-color: #dcdfe6;
}
</style>
